How to include sound on your page


This week in Home Improvements you will find some helpful tips on how to include sound on your page. Adding sound is a great way to give your page another dimension.

Be careful though, while a web page with sound can be a wonderful thing, it can also turn out to be an unnerving experience. Make sure that your visitors don't have to sit up all night trying to download a page with tons of multimedia extravaganzas they might not even be interested in. As with graphics, it is important to strike the right balance between style, size and quality�.




The Browser

While in theory it would be nice if you had the time and the talent to create your page so as to take into account the pros and cons of all the different browsers that circumnavigate the virtual planet, in practise this is somewhat difficult. But you should be aware that there are differences in the way the big players, Netscape Navigator and Microsoft Internet Explorer, handle sound.

There are different tags for both browsers, which need to be combined in the right way to make your sounds available to the users of either browser in the same way


a) Netscape (3.0 and above)

Using the <EMBED> tag, Netscape allows you to embed sound directly into your page. The <EMBED> tag has five important attributes (SRC, AUTOSTART, LOOP, VOLUME and HIDDEN):

SRC="yourfilename.mid|wav"

This specifies the name and extension of the sound file you want to use.

AUTOSTART="true|false"

"False" is the default and when left on default this attribute will require your visitor to start the sound file by clicking the start button on the sound player console. The console also features stop, pause and volume control. If set to "true", the specified sound file will play as soon as the page is downloaded.

LOOP="true|false"

If set to "false", the sound file will only be played once. The "true" value would play the sound file repeatedly the page is closed down or left.

VOLUME="n"

The volume number can be anything from 0 to 100. Default volume is 50. When the sound player is displayed, the visitor of your page can adjust the volume by using the volume control function.

HIDDEN="true|false"

If you choose "true" your page will not display the sound player console. This can be useful for short wave files. The default setting is "false", so if you omit this attribute all together the player console will show up on your page

A complete <EMBED> tag might look like this:

<EMBED SRC="music.mid" AUTOSTART="true" VOLUME="75" HIDDEN="true" LOOP="true">

This would automatically start a midi file called 'music' after the page is downloaded. Note that the LOOP="true" setting would make the sound file play for as long as your page is viewed. The HIDDEN="true" setting hides the console and leaves your visitor exposed to an uncontrollable onslaught of whatever the music file contains.

<EMBED SRC="music.mid" AUTOSTART="true" VOLUME="75" LOOP="true">

This does the same as the above, but gives the visitor of your page the chance to set the sound to his or her preferences.


b) Internet Explorer

Microsoft Internet Explorer has its own specific tag for doing the above outlined - the <BGSOUND> tag. The tag has the following attributes:

SRC="yoursoundfile.mid|wav"

As with Netscape, this specifies the sound file to be played.

LOOP="n"

The LOOP attribute can have the values 0 to infinite, specifying the number of times your file will be played.

Example:

<BGSOUND SRC="music.mid" LOOP="3">

This would play the file music.mid 3 time as the background sound to your page. The file can be stopped by clicking the stop button of your browser.


c) Making sure everyone (well, almost) can listen to your page

Since you have no control over what type of browser people view your page in, it makes sense to include both tags.

Here is an example of how to include a self executing soundfile that works on both Browsers:

<EMBED SRC="music.mid" AUTOSTART="true" HIDDEN="true">
<NOEMBED> <BGSOUND SRC="music.mid"> </NOEMBED>

Don't forget to specify the exact path to your sound file if it isn't in the same directory as your html document!


For more information please email [email protected]